<template>
  <div id="box-center">
    <div id="box-menu">
      <span>选择房间：</span>
      <el-select
        v-model="nowRoom"
        placeholder="请选择"
        size="small"
        style="margin-right: 10px;"
        @change="updateDevice"
      >
        <el-option
          v-for="item in roomData"
          :key="item.number"
          :label="item.name"
          :value="item.number"
        >
          <span style="float: left">{{ item.name }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.number }}</span>
        </el-option>
      </el-select>
      <span>选择设备：</span>
      <el-select
        v-model="selection.deviceID"
        placeholder="请选择"
        size="small"
        style="margin-right: 10px;"
        @change="updateData"
      >
        <el-option
          v-for="item in deviceData"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span style="float: left">{{ item.label }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
        </el-option>
      </el-select>
      <span>选择日期：</span>
      <el-date-picker
        v-model="selection.date"
        type="date"
        value-format="yyyy-MM-dd"
        size="small"
        placeholder="选择日期"
        @change="updateData"
      ></el-date-picker>
    </div>
    <div id="box-body">
      <el-table :data="tableData" style="width: 100%;" height="435" size="mini">
        <el-table-column label="设备号">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.value }}</span>
          </template>
        </el-table-column>
        <el-table-column label="温度">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.fTemperature }}</span>
          </template>
        </el-table-column>
        <el-table-column label="湿度">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.fHumidity }}</span>
          </template>
        </el-table-column>
        <el-table-column label="CO2">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.fCarbonDioxide }}</span>
          </template>
        </el-table-column>
        <el-table-column label="tvoc">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.fTvoc }}</span>
          </template>
        </el-table-column>
        <el-table-column label="压强">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.fPressure }}</span>
          </template>
        </el-table-column>
        <el-table-column label="臭氧">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.fO3 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="风速">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.fWind }}</span>
          </template>
        </el-table-column>
        <el-table-column label="PM2.5">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.fPm }}</span>
          </template>
        </el-table-column>
        <el-table-column label="时间" width="200">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.datetime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="dataCount"
        background
        style="width: 100%;margin-top: 10px;"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/api/time.js";
import {
  getRoomList,
  getDeviceList,
  getDataList,
  deleteData,
} from "@/api/manage.js";
export default {
  data() {
    return {
      selection: {
        deviceID: null,
        date: formatDate(),
      },
      tableData: [],
      deviceData: [],
      roomData: [],
      nowRoom: 0,
      currentPage: 1,
      pageSize: 10,
      dataCount: 0,
    };
  },
  methods: {
    getMess() {
      getRoomList(1, 100).then((response) => {
        if (response.flag) {
          this.roomData = response.data.data;
          this.nowRoom = this.roomData[0].number;
          this.updateDevice();
        } else {
          this.$message({
            message: response.message,
            type: "error",
            center: true,
          });
        }
      });
    },
    updateDevice() {
      getDeviceList(this.nowRoom).then((response) => {
        if (response.flag) {
          this.deviceData = response.data;
          this.selection.deviceID = this.deviceData[0].value;
          this.updateData();
        } else {
          this.$message({
            message: response.message,
            type: "error",
            center: true,
          });
        }
      });
    },
    updateData() {
      getDataList(
        this.currentPage,
        this.pageSize,
        this.selection.deviceID,
        this.selection.date
      ).then((response) => {
        if (response.flag) {
          this.tableData = response.data.data;
          this.dataCount = response.data.total;
        } else {
          this.$message({
            message: response.message,
            type: "error",
            center: true,
          });
        }
      });
    },
    handleDelete(id) {
      deleteData(id).then((response) => {
        if (response.flag) {
          this.$message({
            message: response.message,
            type: "success",
            center: true,
          });
        } else {
          this.$message({
            message: "删除数据失败",
            type: "error",
            center: true,
          });
        }
        this.updateData();
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.updateData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.updateData();
    },
  },
  created() {
    this.getMess();
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/myCss/table.scss";
</style>